<template>
  <div>
    <el-card>
      <page-table
        :columns="column"
        :data="dataSource"
        :loading="listLoading"
        :options="options"
      ></page-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :pageNo.sync="listQuery.pageNo"
        :pageSize.sync="listQuery.pageSize"
        @pagination="handleList"
      />
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'myPage',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      listLoading: false,
      dataSource: [],
      options: {
        select: false,
        border: false,
        index: false
      },
      total: 0,
      listQuery: {
        pageNo: 1,
        pageSize: 10
      }
    }
  },
  computed: {
    column() {
      return [
        {
          prop: 'iconName',
          label: '图标名称'
        },
        {
          prop: 'iconUrl',
          label: '图标',
          render: (h, { row }) => {
            return (
              <div>
                <el-image
                  style="width:50px;height:50px;border-radius: 25px"
                  src={row.iconUrl}
                  preview-src-list={[row.iconUrl]}
                  fit="cover"
                >
                  <div slot="error" class="image-slot">
                    <div>暂无图标</div>
                  </div>
                </el-image>
              </div>
            )
          }
        },
        {
          prop: 'iconPoint',
          label: '跳转路径',
          render: (h, { row }) => {
            return <div>{row.iconPoint ? row.iconPoint : '未指定'}</div>
          }
        },
        {
          prop: 'isEnable',
          label: '启用状态',
          render: (h, { row }) => {
            return <div>{row.isEnable ? '启用' : '未启用'}</div>
          }
        },
        {
          prop: 'iconSort',
          label: '排序'
        },
        {
          prop: 'createdTime',
          label: '创建时间'
        },
        {
          prop: '',
          label: '操作',
          render: (h, { row }) => {
            return (
              <div>
                <el-button type="text" onClick={() => this.handleEnable(row)}>
                  {row.isEnable ? '隐藏' : '启用'}
                </el-button>
                <el-button type="text" onClick={() => this.handleEdit(row.id)}>
                  编辑
                </el-button>
                {!row.isEnable ? (
                  <el-button
                    type="text"
                    style="color:#BEBEBE"
                    onClick={() => this.handleDelete(row.id)}
                  >
                    删除
                  </el-button>
                ) : (
                  ''
                )}
              </div>
            )
          }
        }
      ]
    }
  },
  watch: {},
  created() {
    this.handleList()
  },
  activated() {
    this.handleList()
  },
  mounted() {},
  destroyed() {},
  methods: {
    //获取我的页面图标列表
    handleList() {
      this.$http.finish.getMyPageList(this.listQuery).then(res => {
        if (res.status === 200) {
          this.dataSource = res.data.records
          this.total = res.data.total
        }
      })
    },

    //编辑
    handleEdit(id) {
      this.$router.push({
        path: '/operation/finish/edit-my-page',
        query: { dialogType: 'edit', id }
      })
    },

    //删除
    handleDelete(id) {
      this.$handleConfirm({ message: `确定删除该我的图标，是否继续？` }).then(() => {
        this.$http.finish.deleteMyPage(id).then(res => {
          if (res.status === 200) {
            this.$message.success('删除成功')
            const totalPage = Math.ceil((this.total - 1) / this.listQuery.pageSize) // 总页数
            this.listQuery.pageNo =
              this.listQuery.pageNo > totalPage ? totalPage : this.listQuery.pageNo
            this.listQuery.pageNo = this.listQuery.pageNo < 1 ? 1 : this.listQuery.pageNo
            this.handleList()
          }
        })
      })
    },

    //启用  or  隐藏
    handleEnable(row) {
      const msg = row.isEnable ? '隐藏' : '启用'
      this.$handleConfirm({ message: `确定${msg}该我的图标，是否继续？` }).then(() => {
        const params = {
          isEnable: !row.isEnable,
          id: row.id
        }
        this.$http.finish.updateEnableMyPage(params).then(res => {
          if (res.status === 200) {
            this.$message.success(`${msg}成功`)
            this.handleList()
          }
        })
      })
    }
  }
}
</script>

<style scoped></style>
